<template>
	<view class="profile-container">
        <u-cell-group>
        	<u-cell-item  title="头像" @click="handleFace">
                <image class="face" :src="profileForm.face || face"></image>
        	</u-cell-item>
        	<u-cell-item title="用户名" :value="profileForm.uname" :arrow="false" @click="handleUname"></u-cell-item>
            <u-cell-item  title="昵称" :value="profileForm.nickname" @click="showEditNickname = true"></u-cell-item>
            <u-cell-item title="性别" :value="profileForm.sex ? '男' : '女'" @click="showSexActionsheet = true"></u-cell-item>
            <block v-if="profileForm.birthday">
                <date-picker :endDate="endDate" :defaultValue="formatterBirthdayDate()" @onConfirm="handleBirthday">
                    <u-cell-item title="出生日期" :value="formatterBirthdayDate()"></u-cell-item>
                </date-picker>
            </block>
            <block v-else>
                <date-picker :endDate="endDate" @onConfirm="handleBirthday">
                    <u-cell-item title="出生日期" :value="formatterBirthdayDate()"></u-cell-item>
                </date-picker>
            </block>
        </u-cell-group>
        <u-action-sheet :list="sexActions" v-model="showSexActionsheet" @click="handleSexChange"></u-action-sheet>
        <prompt
            title="请输入昵称"
            tip="2-20位字符、字母或者数字"
            :value="profileForm.nickname"
            :show="showEditNickname"
            @cancel="showEditNickname = false"
            @confirm="confirm"
            @getNickname="handleNickname">
        </prompt>
	</view>
</template>

<script>
    import * as API_Members from '@/api/members.js'
    import Cache,{Keys} from '@/utils/cache.js';
    import { api } from '@/config/config.js'
    import { Foundation, RegExp } from '@/ui-utils/index.js'
	export default {
		data() {
			return {
                face: '../../static/images/member/icon-noface.jpg',
                nickname: '',
                profileForm: '',
                sexActions: [
                    { text: '女' },
                    { text: '男' }
                ],
                showEditNickname: false,
                showSexActionsheet: false,
                endDate: ''
			}
		},
        onLoad() {
            const user = Cache.getItem('user')
            this.profileForm = user
            this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
        },
		methods: {
            //头像
            handleFace() {
                uni.chooseImage({
                    count: 1,
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths
                        uni.uploadFile({
                            url: `${api.buyer}/uploaders`,
                            header: { Authorization: Cache.getItem(Keys.accessToken) },
                            filePath: tempFilePaths[0],
                            name: 'file',
                            success: (uploadFileRes) => {
                                const data = typeof uploadFileRes.data === 'string' ? JSON.parse(uploadFileRes.data) : uploadFileRes.data
                                this.profileForm.face = data.url
                                this.submitProfile()
                            }
                        })
                    }
                });
            },
            //用户名
            handleUname() {
                this.$u.toast('用户名不支持修改哟~')
            },
            //昵称
            confirm() {
                if (!this.nickname){
                    this.$u.toast('请输入昵称')
                } else if (this.nickname.length < 2 || this.nickname.length > 20){
                    this.$u.toast('长度应在2-20之间')
                } else if (!RegExp.userName.test(this.nickname)){
                    this.$u.toast('格式不正确')
                }else{
                    this.profileForm.nickname = this.nickname
                    this.showEditNickname = false
                    this.submitProfile()
                }
            },
            //获取组件传过来的数据
            handleNickname(e) {
                this.nickname = e.value
            },
            //性别
            handleSexChange(index) {
                this.profileForm.sex = index
                this.submitProfile()
            },
            //生日
            handleBirthday(e) {
                this.profileForm.birthday = Foundation.dateToUnix(e.dateValue)
                this.submitProfile()
            },
            //格式化生日日期
            formatterBirthdayDate() {
                const { birthday } = this.profileForm
                return birthday ? Foundation.unixToDate(birthday, 'yyyy-MM-dd') : ''
            },
            //保存
            submitProfile() {
                API_Members.saveUserInfo(this.profileForm).then(response => {
                    uni.setStorageSync(Keys.user, response);
                    // Cache.setItem(Keys.user, response)
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .profile-container {
        /deep/.u-cell {
            align-items: center;
        }
        .face {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            position: absolute;
            top: 3rpx;
            right: 65rpx;
        }
    }
</style>
